<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app" style="border:5px solid red;width:300px;padding:10px;">
      root<child></child>
    </div>
    <script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
    <script>
      var grand1 = {
        inject:['msg','age'],
        template:`<div style="border:5px solid blue;padding:10px;">
          grand1
          <p>{{msg}}</p>
          <p>{{age}}</p>
          </div>`,
        data:()=>({name:'grand1'}),
      }
      var child = {
        inject:['msg','age'],
        template:`<div ref="childDiv" @click="print" style="border:5px solid green;padding:10px;">
          child
          <p>{{msg}}</p>
          <p>{{age}}</p>
          <grand1></grand1>
          </div>`,
        components:{grand1}
      }
      //root是组件树的根
      var root = new Vue({
        el: "#app",
        data:()=>({name:'root'}),
        provide:{
          msg:'msg from root',
          age:18
        },
        components: {
          child
        },
      });
    </script>
  </body>
</html>
